<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIHub 个人账号面板</title>
    <!-- 引入Tailwind CSS -->
    <script src="{{dz}}\plugins\AIHub-plugin\resources\html\tools\tailwindcss.css"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="{{dz}}\plugins\AIHub-plugin\resources\html\tools\all.min.css">
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        neutral: '#f5f7fa',
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .glass-effect {
                background-color: rgba(255, 255, 255, 0.18);
                backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                box-shadow: 0 0 20px rgba(255,255,255,0.15), 
                            inset 0 0 10px rgba(255,255,255,0.05);
            }
            .info-label {
                @apply text-gray-200 text-sm mb-1 block;
            }
            .info-value {
                @apply text-white font-medium text-lg;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-cover bg-center bg-fixed" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('{{dz}}\plugins\AIHub-plugin\resources\img\ca39287c42dd4346bade3ccba0470b8d.jpeg');">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 页面头部 -->
        <header class="mb-8 text-center glass-effect rounded-2xl p-8">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white mb-2">个人账号信息</h1>
            <p class="text-gray-200">账号详情与使用统计</p>
        </header>
        
        <main class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 个人信息卡片 -->
            <div class="glass-effect rounded-2xl p-8">
                <div class="flex flex-col items-center mb-6">
                    <img src="{{avatar}}" alt="用户头像" class="w-20 h-20 rounded-full border-4 border-white/50 shadow-md mb-3 box-shadow: 0 0 15px rgba(255,255,255,0.3);">
                    <h2 class="text-xl font-semibold flex items-center text-white">
                        <span class="w-8 h-8 rounded-full bg-primary/30 text-primary flex items-center justify-center mr-2">
                            <i class="fas fa-user"></i>
                        </span>
                        基本信息
                    </h2>
                </div>
                <div class="space-y-4">
                    <!-- 账户名 -->
                    <div>
                        <span class="info-label">账户名</span>
                        <span class="info-value">{{name}}</span>
                    </div>
                    <!-- ID -->
                    <div>
                        <span class="info-label">账号ID</span>
                        <span class="info-value">{{UID}}</span>
                    </div>
                    <!-- QQ号 -->
                    <div>
                        <span class="info-label">QQ号</span>
                        <span class="info-value">{{QQID}}</span>
                    </div>
                    <!-- 注册时间 -->
                    <div>
                        <span class="info-label">注册时间</span>
                        <span class="info-value">{{time}}</span>
                    </div>
                    <!-- 账号状态 -->
                    <div>
                        <span class="info-label">账号状态</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/30 text-green-100">
                            {{Status}}
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- 签到信息卡片 -->
            <div class="glass-effect rounded-2xl p-8">
                <h2 class="text-xl font-semibold mb-4 flex items-center text-white">
                    <span class="w-8 h-8 rounded-full bg-primary/30 text-primary flex items-center justify-center mr-2">
                        <i class="fas fa-calendar-check"></i>
                    </span>
                    签到信息
                </h2>
                <div class="space-y-4">
                    <!-- 今天是否签到 -->
                    <div>
                        <span class="info-label">今日签到状态</span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/30 text-blue-100">
                            {{Signin}}
                        </span>
                    </div>
                    <!-- 上次签到时间 -->
                    <div>
                        <span class="info-label">上次签到时间</span>
                        <span class="info-value">{{Checkintime}}</span>
                    </div>
                    <!-- 最新签到时间 -->
                    <div>
                        <span class="info-label">今日签到时间</span>
                        <span class="info-value">{{Checkintimenow}}</span>
                    </div>
                    <!-- 签到获得经验 -->
                    <div>
                        <span class="info-label">今日获得经验</span>
                        <span class="info-value">+{{Experience}} 经验</span>
                    </div>
                    <!-- 连续签到 -->
                    <div>
                        <span class="info-label">连续签到天数</span>
                        <span class="info-value">{{Continuous}} 天</span>
                    </div>
                </div>
            </div>
            
            <!-- 账户统计卡片 -->
            <div class="glass-effect rounded-2xl p-8">
                <h2 class="text-xl font-semibold mb-4 flex items-center text-white">
                    <span class="w-8 h-8 rounded-full bg-primary/30 text-primary flex items-center justify-center mr-2">
                        <i class="fas fa-bar-chart"></i>
                    </span>
                    账户统计
                </h2>
                <div class="space-y-4">
                    <!-- 已注册天数 -->
                    <div>
                        <span class="info-label">已注册天数</span>
                        <span class="info-value">{{RegistrationDays}} 天</span>
                    </div>
                    <!-- 累计积分 -->
                    <div>
                        <span class="info-label">累计获得积分</span>
                        <span class="info-value">{{Cumulative}} 积分</span>
                    </div>
                </div>
            </div>
            
            <!-- AI使用信息卡片 -->
            <div class="glass-effect rounded-2xl p-8">
                <h2 class="text-xl font-semibold mb-4 flex items-center text-white">
                    <span class="w-8 h-8 rounded-full bg-primary/30 text-primary flex items-center justify-center mr-2">
                        <i class="fas fa-microchip"></i>
                    </span>
                    AI使用信息
                </h2>
                <div class="space-y-4">
                    <!-- 当前使用模型 -->
                    <div>
                        <span class="info-label">当前使用模型</span>
                        <span class="info-value">{{Model}}</span>
                    </div>
                    <!-- 模型价格 -->
                    <div>
                        <span class="info-label">模型价格</span>
                        <span class="info-value">输入：{{Input}}<br>输出：{{Output}}</span>
                    </div>
                    <!-- 上下文tokens -->
                    <div>
                        <span class="info-label">上下文窗口</span>
                        <span class="info-value">{{context}}</span>
                    </div>
                    <!-- 公司名 -->
                    <div>
                        <span class="info-label">模型提供方</span>
                        <span class="info-value">{{company}}</span>
                    </div>
                    <!-- 累计AI次数 -->
                    <div>
                        <span class="info-label">累计AI使用次数</span>
                        <span class="info-value">{{Cumulativetimes}} 次</span>
                    </div>
                    <!-- 累计使用积分 -->
                    <div>
                        <span class="info-label">累计使用积分</span>
                        <span class="info-value">{{Cumulativeintegral}} 积分</span>
                    </div>
                </div>
            </div>
        </main>
        
        <footer class="mt-10 text-center glass-effect rounded-2xl p-6">
            <p class="text-gray-300 text-sm">© 2025 个人账号中心 | 最后更新：{{gxtime}}</p>
        </footer>
    </div>
</body>
</html>